import { useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
// 从redux中获取到的state返回的数据类型
import { RootState } from '@/types/store'

// 函数封装的基本思想：
// 将相同的逻辑直接拷贝到函数中，不同的逻辑通过函数参数传入。
// 需要返回数据，就通过函数返回值返回
// 不同点:分发的 action 函数不同 还有 获取的状态不同,所以把这两个作为自定义hooks的参数
// 相同点:都是为了拿到相应的应用状态,因此,把拿到的应用状态作为返回值
export default function useInitialState<StateName extends keyof RootState> (
  // 分发的 action 函数
  action: () => void,
  // 获取的状态
  stateName: StateName
) {
  // 向redux中存储数据:根据不同的action传入不同的状态中
  const dispatch = useDispatch()
  useEffect(() => {
    dispatch(action())
  }, [])
  // 向redux中获取数据:将所需获取的状态传入相应的state中
  const state = useSelector((state: RootState) => state[stateName])
  // 将获取到的应用状态返回出去
  return state
}
